<template>
  <div class="login">
    <div class="left"></div>

    <div class="right">
      <div class="info">
        <div class="logo"></div>
        <div class="demo-login">
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
            <FormItem prop="name">
              <Input
                v-model.trim="formValidate.user_num"
                :border="false"
                class="ivu-input ivu-input-default ivu-input-with-prefix in"
                placeholder="请输入账号"
              ></Input>
              <span class="ivu-input-prefix"
                ><span class="user_name"></span
              ></span>
            </FormItem>
            <FormItem prop="password">
              <Input
                v-model.trim="formValidate.user_pwd"
                :border="false"
                type="password"
                class="ivu-input ivu-input-default ivu-input-with-prefix in"
                placeholder="请输入密码"
              ></Input>
              <span class="ivu-input-prefix"
                ><span class="user_pass"></span
              ></span>
            </FormItem>
            <FormItem prop="code">
              <Input
                v-model.trim="formValidate.user_code"
                :border="false"
                class="ivu-input ivu-input-default ivu-input-with-prefix in c3"
                placeholder="请输入验证码"
              >
                <template #prefix>
                  <span class="user_code"></span>
                </template>
                <template #suffix>
                  <span>
                    <img @click="imgres" :src="imgUrl" alt="" class="yzm_yz" />
                  </span>
                </template>
              </Input>
            </FormItem>
          </Form>
          <Button type="primary" class="buttonCol" @click="login"
            >立即登录</Button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {useRouter} from 'vue-router'
import { api_get_vercode, api_post_login } from "../../api/login/login";
import {Message} from 'view-ui-plus'
const router = useRouter();

const imgUrl = ref("");
const formValidate = ref({
  user_num: "",
  user_pwd: "",
  user_code: "",
});
const ruleValidate = ref({
  account_name: [
    {
      message: "请输入账号",
      trigger: "blur",
    },
  ],
  account_pwd: [
    {
      message: "请输入密码",
      trigger: "blur",
    },
  ],
  account_code: [
    {
      
      message: "请输入验证码",
      trigger: "blur",
    },
  ],
});

const login = () => {
  console.log(formValidate.value.user_num);
  
  // const params = JSON.parse(JSON.stringify(formValidate.value))
  
  const params = {
    user_num: formValidate.value.user_num,
    user_pwd: formValidate.value.user_pwd,
    user_code: formValidate.value.user_code,
    
  }
  api_post_login(params)
    .then((result) => {
      console.log(result)
      sessionStorage.setItem('token',JSON.stringify(result.data.data.jwt))
      setTimeout(() => {
        
        router.push('/Found')
        console.log('登录成功');
        // if (result.msg == '20001001') {
          
          
        // }
      },1500)
      
      Message.success('登陆成功');
    })
    .catch((err) => {
      console.log(err);
    });


};

const getCodeImg = () => {
  api_get_vercode()
    .then((result) => {
      // console.log(imgUrl.value);
      imgUrl.value = result.data.data.img;
      formValidate.value.code_key = result.data.data
    })
    .catch((err) => {
      console.log(err);
    });
};

const imgres = () => {
  getCodeImg();
};
onMounted(() => {
  getCodeImg();
});
</script>

<style scoped>
.login {
  display: flex;
  height: 100vh;
  min-height: 800px;
  min-width: 1270px;
}
.left {
  flex: 4;
  background-color: #a07171;
  background: url(../../image/banner_left.png) repeat;
  background-size: cover;
  height: 100%;
  margin-left: -10px;
  padding-right: 10px;
}

.right {
  flex: 11;
  background-color: #ffffff;
  align-items: center;
}

.info {
  width: 520px;
  height: 600px;
  position: absolute;
  top: 18%;
  left: 47.5%;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 12px #0000001a;
}
.logo {
  width: 360px;
  height: 98px;
  background: url(../../image/login_logo.png) no-repeat center center;
  margin: 80px auto 40px;
}

.demo-login {
  width: 400px !important;
  margin: 0 auto;
}

.ivu-input {
  height: 50px !important;
  padding: 0;
}
.ivu-input-with-prefix {
  padding-left: 40px !important;
}
.user_name,
.user_pass,
.user_code {
  display: inline-block;
  width: 40px;
  height: 50px;
  background-repeat: no-repeat;
  background-position: 11px 14px;
}

.user_name {
  background-image: url("../../image/icon_user.png");
}
.user_pass {
  background-image: url("../../image/icon_lock.png");
}
.user_code {
  background-image: url("../../image/icon_code.png");
}
.in {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 4px 7px 4px 30px !important;
}

.buttonCol {
  width: 100%;
  height: 56px;
  border-radius: 41px;
  background: #aa531b;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  border: 0px;
  margin-top: 11px;
  background-color: rgba(170, 83, 27, 0.5);
}

.ivu-input-with-prefix {
  padding: 7px;
}

.yzm_yz {
  position: absolute;
  height: 40px;
  margin-top: 5px;
  right: 5px;
}

.ivu-input:hover {
  border-color: #a9785d;
}
.c3{
  padding-left: 6px !important;
}
</style>